import './index.scss'
import {Col,Row} from "antd";
import React, {useEffect} from "react";
import {
    CheckOutlined
} from '@ant-design/icons';
import store from "../../../store";
import {observer} from 'mobx-react'

const SelectLabelList = ({labels,setLabels}) => {
    console.log(labels)
useEffect(()=>{
        store.contentLabel.getAllLabel()
},[])
    return <Row gutter={[16, 24]} id="selectLabelList">
            <>
                {store.contentLabel.labelArr.map((v, i) => <Col span={4} key={i}>
                    <div className={labels.indexOf(v.tagName)!==-1?'tagActive':'tag'} onClick={()=>{
                        let _labels=[...labels]
                        console.log(_labels)
                        if (labels.indexOf(v.tagName)!==-1){
                            _labels.splice(_labels.indexOf(v.tagName),1)
                        }else {
                            if (labels.length>=3) {
                                _labels.shift()
                            }
                            _labels.push(store.contentLabel.labelArr[i].tagName)
                        }
                        setLabels(_labels)
                    }}>
                        {v.tagName}
                        {labels.indexOf(v.tagName)!==-1?<CheckOutlined className={"icon"}/>:''}
                    </div>
                </Col>)}
            </>
    </Row>
}
export default observer(SelectLabelList)